<template>
  <div @scroll="rememberPos" ref="scrollList" class="scroll-wrapper">
    <!-- 列表 -->
    <!-- <van-cell :key="i" v-for="i in 20" title="单元格" value="内容">{{
            i
          }}</van-cell> -->
    <van-pull-refresh
      ref="refresh"
      loosing-text="手放开~刷新"
      success-text="从头再来"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 新闻列表 -->
        <van-cell v-for="item in list" :key="item.art_id">
          <!-- 一条新闻的结构 -->
          <div
            class="article_item"
            @click="$router.push(`/article/${item.art_id}`)"
          >
            <h3 class="van-ellipsis">
              {{ item.title }}
            </h3>
            <div class="img_box" v-if="item.cover.type">
              <van-image
                :class="item.cover.type === 1 ? 'w100' : 'w33'"
                v-for="(img, i) in item.cover.images"
                :key="i"
                lazy-load
                fit="cover"
                :src="img"
              >
                <template #loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <!-- <van-image
                      class="w33"
                      fit="cover"
                      src="https://img.yzcdn.cn/vant/cat.jpeg"
                    />
                    <van-image
                      class="w33"
                      fit="cover"
                      src="https://img.yzcdn.cn/vant/cat.jpeg"
                    /> -->
            </div>
            <div class="info_box">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | relTime }}</span>
              <!-- 打开弹层：不感兴趣/举报等 -->
              <span
                v-if="$store.state.user.token"
                @click="openAction(item.art_id)"
                class="close"
                ><van-icon name="cross"></van-icon
              ></span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 弹出层
      v-model 是个语法糖=> :value + @input
    -->
    <MoreAction v-model="isShow" @del-dlike="delDlike" :artId="artId" />
    <!-- <MoreAction :value="isShow" @input="handlerPopup" /> -->
  </div>
</template>

<script>
import { getArticleListApi } from '@/api/home.js'
import MoreAction from './more-action.vue'
/**
 * 记录被缓存组件滚动位置：
 * 1. 给列表绑定滚动事件=》获取滚动高度，存储到变量上
 * 2. 在切换页面后，再次回来=》通过上次记录滚动高度，获取到列表DOM对象，滚动到记录位置
 */
export default {
  components: {
    MoreAction
  },
  props: {
    channelId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      artId: '', // 文章ID
      isShow: false, // 控制弹层是否显示
      list: [], // 列表数据（新闻列表）
      loading: false, // 列表加载状态=》true 显示loading | 关闭loading
      finished: false, // 列表数据是否加载完成=》加载完成改成true
      refreshing: false, // 是否开始刷新=》true 显示loading | 关闭loading
      timestamp: Date.now(),
      scrollTop: 0 // 列表滚动高度
    }
  },
  mounted () {
    console.log('$refs:', this.$refs)
  },
  /**
   * 1. 默认会执行一次
   * 2. 被缓存后，离开再次进入
   */
  activated () {
    console.log('子：被缓存，再次进入了组件')
    this.scrollList()
  },
  // 离开被缓存组件会被执行
  deactivated () {
    console.log('子：离开被缓存组件')
  },
  methods: {
    // 删除不感兴趣文章
    delDlike () {
      // 获取要删除文章的索引值
      const index = this.list.findIndex(item => item.art_id === this.artId)
      // 执行删除
      this.list.splice(index, 1)
    },
    // 打开更多操作弹层
    /**
     * artId 当前点击操作文章ID
     */
    openAction (artId) {
      console.log(artId)
      // 把当前点击操作文章ID传给弹层
      this.artId = artId
      this.isShow = true
    },
    handlerPopup (isShow) {
      console.log('子传父：', isShow)
      this.isShow = isShow
    },
    // 列表滚动事件回调
    rememberPos (e) {
      // console.log('滚动高度：', e.target.scrollTop)
      this.scrollTop = e.target.scrollTop
    },
    // 执行滚动的方法=》滚动到指定位置
    scrollList () {
      this.$refs.scrollList.scrollTop = this.scrollTop
    },
    /**
     * 上拉加载分页数据
     * 1. 第一次默认执行一次，加载第一页数据（如果不够一屏，加载第二页数据）
     * 2. 列表滚动到底部的时候，再去加载一页数据（多次触发）
     */
    async onLoad () {
      // 默认开启loading
      // console.log('开始加载：', this.loading)
      await this.$sleep(2000)
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const { data } = await getArticleListApi({
        channel_id: this.channelId,
        timestamp: this.timestamp
      })
      // 追加当前分页数据
      this.list.push(...data.results)

      // console.log('文章列表：', data)

      // 加载状态结束=>关闭loading
      this.loading = false
      // 关闭刷新loading
      this.refreshing = false

      // 数据全部加载完成=》判断数据是否加载完成
      if (!data.pre_timestamp) {
        this.finished = true
      } else {
        // 存在=》还有数据=> 把查询下一页数据的时间戳赋值给timestamp
        this.timestamp = data.pre_timestamp
      }
    },
    // 下拉刷新列表=》向下拖拽列表，手放开会触发
    onRefresh () {
      // 清空列表数据
      if (this.refreshing) {
        this.list = []
      }
      // 重置列表的状态（列表可能加载完了（finished=true）或者没加载完）
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true // 开启列表加载loading效果
      // 刷新需要重置时间戳=>为当前时间!!!
      this.timestamp = Date.now()
      this.onLoad()
    }
  }
}
</script>

<style lang="less" scoped>
// 一条新闻的结构样式
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      width: 100%;
      height: 180px;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;
    span {
      padding-right: 10px;
      &.close {
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}
</style>
